<template>
  <div class="detailArt">
    <Header title="文章详情" path="/home" type="detailArt"></Header>
    <h3 v-text="obj.title"></h3>
    <span v-text="obj.date"></span>
    <div class="con" v-html="obj.content"></div>
    <DetailBottom :number="num" detail-type="detailArt" :id="id"></DetailBottom>
  </div>
</template>
<script>
import Header from '@/components/Header.vue';
import DetailBottom from '@/components/DetailBottom.vue';
export default {
  name: "detailArtCom",
  data() {
    return {
      num: 8,
      id: '',
      obj: {},
      isCommit: false
    };
  },
  mounted() {
    const id = this.$route.params.id
    this.id = id;
    this.$axios.get('getArtId', { params: { id } }).then(rs => {
      this.$previewRefresh();
      this.obj = rs.obj;
      this.obj.date = new Date(rs.obj.updatedAt).toLocaleDateString();
      this.obj.content = this.obj.content.replace(/<img/g, '<img preview="1" preview-text="描述文字"');
      this.num = rs.num;
    })
  },
  methods: {},
  components: {
    Header,
    DetailBottom
  }
};
</script>
<style lang="less" scoped>
div.detailArt {
  padding: 40px 5px;
  background-image: url(../assets/images/other/bookBg.png);

  h3 {
    line-height: 1.5;
    text-align: center;
    padding: 0 20px;
  }

  span {
    display: block;
    text-align: center;
    color: #666;
  }

  div.con {
    line-height: 1.8;
    color: rgb(0, 0, 0);

    text-align: justify;
    text-indent: 2em;

  }


}
</style>